<template>
  <div class="password">
    <!-- 导航栏 -->
    <van-nav-bar
      title="修改密码"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />

    <div class="main">
      <van-form>
        <van-field
          v-model="oldpassword"
          label="旧密码"
          placeholder="请填写旧密码"
          :type="isShowold ? 'text' : 'password'"
          :right-icon="isShowold ? 'eye-o' : 'closed-eye'"
          @click-right-icon="showoldPassword"
        />

        <van-field
          v-model="newpassword"
          label="新密码"
          placeholder="请填写新密码"
          :type="isShownew ? 'text' : 'password'"
          :right-icon="isShownew ? 'eye-o' : 'closed-eye'"
          @click-right-icon="shownewPassword"
        />

        <van-field
          v-model="mailbox"
          label="邮箱"
          placeholder="请填写邮箱账号"
        />

        <van-field
          v-model="sms"
          center
          clearable
          label="邮箱验证码"
          placeholder="请输入邮箱验证码"
        >
          <template #button>
            <van-button
              v-show="show"
              size="small"
              type="primary"
              @click="getemailValidCode"
            >
              发送验证码
            </van-button>

            <van-button
              v-show="!show"
              size="small"
              type="primary"
            >
              {{ count }}秒后重新发送
            </van-button>
          </template>
        </van-field>

        <div style="margin: 16px">
          <van-button round block type="info" @click="getcheckValidCode">
            提交
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "Password",

  data() {
    return {
      oldpassword: "",
      newpassword: "",
      mailbox: "",
      sms: "",
      count: "",
      timer: null,
      show: true,

      //是否明文显示密码
      isShowold: false,
      isShownew: false,
    };
  },

  methods: {
    // 返回
    onClickLeft() {
      this.$router.push({ name: "Setup" });
    },

    //显示密码
    showoldPassword() {
      this.isShowold = !this.isShowold;
    },

    shownewPassword() {
      this.isShownew = !this.isShownew;
    },

    //获取邮箱验证
    getemailValidCode() {
      this.axios({
        method: "post",
        url: "/emailValidCode",
        data: {
          email: this.mailbox,
        },
      })
        .then((res) => {
          //

          this.$toast(res.data.msg);

          let time_count = 60;
          if (!this.timer) {
            this.count = time_count;
            this.show = false;
            this.timer = setInterval(() => {
              if (this.count > 0 && this.count <= time_count) {
                this.count--;
              } else {
                this.show = true;
                clearInterval(this.timer);
                this.timer = null;
              }
            }, 1000);
          }
        })
        .catch((err) => {});
    },

    //验证码验证接口
    getcheckValidCode() {
      this.axios({
        method: "post",
        url: "/checkValidCode",
        data: {
          validCode: this.sms,
        },
      })
        .then((res) => {
          //

          this.$toast(res.data.msg);

          setTimeout(() => {
            if (res.data.code === "K001") {
              this.getupdatePassword();
            }
          }, 3200);
        })
        .catch((err) => {});
    },

    //获取修改密码接口
    getupdatePassword() {
      this.axios({
        method: "post",
        url: "/updatePassword",
        data: {
          password: this.newpassword,
          oldPassword: this.oldpassword,
        },
      })
        .then((res) => {
          //

          this.$toast(res.data.msg);

          setTimeout(() => {
            if (res.data.code === "E001") {
              sessionStorage.clear();
              this.$router.push({ name: "Order" });
            }
          }, 2000);

          setTimeout(() => {
            this.$toast("请重新登录");
          }, 3000);
        })
        .catch((err) => {});
    },
  },
};
</script>

<style lang="less" scoped>
// 导航栏
/deep/.van-nav-bar {
  position: fixed;
  width: 100%;
  top: 0;
  height: 40px;
}

/deep/.van-nav-bar__title {
  color: #37343b;
  font-weight: 600;
}

/deep/.van-nav-bar__text {
  color: #37343b;
  font-weight: 600;
}

/deep/.van-nav-bar .van-icon {
  color: #37343b;
}

.main {
  width: 100%;
  position: absolute;
  top: 40px;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
}

/deep/.van-button--info {
  background-color: #37343b;
  border-color: #37343b;
}

.van-button--primary {
  background-color: #615c69;
  border-color: #686074;
}
</style>